<template>
  <section>
    <div class="order_deliver_box">
      <p class="info_title">收货信息确认
      <div class="info_title_rt">
        <a class="blue_font" v-if="!curAddrData" @click="addNewAddr()">添加新地址</a>
        <a class="blue_font" @click="showMoreAddr" v-else>更多地址</a>
      </div>
      </p>
      <section class="order_detail pdt6">
        <div class="addrLeft order_address_box" v-if="!!curAddrData">
          <p>{{curAddrData.name}} <span class="blue_font rt pointer" @click="modifyFun()">修改</span></p>
          <p>{{linkAddress}}</p>
          <p>{{curAddrData.mobile}}</p>
        </div>
      </section>
    </div>
    <!-- 修改地址/新增地址 -->
    <el-dialog :title="addrTitle" class="dialogorderinfocomfirm" :visible.sync="dialogvisible" width="450px" center top="20vh">
      <address-form  @close-dialog="closeAddrDialog"></address-form>
    </el-dialog>
    <!-- 更多地址 -->
    <el-dialog :visible.sync="morevisible" border width="650px" top="28vh" :show-close="false" center>
      <section class="more-addr-box">
        <div class="more-addr-head  more-addr-div"><span class="text one">收件人</span><span class="text two">收件地址</span><span class="text three">联系方式</span></div>
        <a v-for="(addrItem, addrIndex) in allAddrData" :key="addrIndex" :class="{'active': addressId === addrItem.id}" class="addr-line more-addr-div" @click="currentAddrFun(addrItem.id)">
          <span class="text one">{{addrItem.name}}</span>
          <span class="text two">{{addrItem.province + addrItem.city + addrItem.area + addrItem.address}}</span>
          <span class="text three">{{addrItem.mobile}}</span>
        </a>
          <a class="more-addbtn" @click="addNewAddr"><i class="el-icon-plus"></i>添加新地址</a>
      </section>
    </el-dialog>
  </section>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { MODIFYADDR } from '@/store/modules/address/mutations-types'
import { Dialog } from 'element-ui'
import { addressForm } from '@/components/index'
import { getWarehouseId } from '@/service/get-data'
export default {
  name: 'ReceveInformation',
  components: {
    elDialog: Dialog,
    addressForm
  },
  data () {
    return {
      warehouseId: 1,
      addrTitle: '修改地址', // 地址弹窗标题
      receiveAddr: '', // 收件地址 字符
      dialogvisible: false, // 地址弹窗
      morevisible: false, // 更多地址弹窗
      curAddrData: '', // 页面显示地址的信息
      addressId: '' // 页面地址的id
    }
  },
  computed: {
    ...mapState({
      // 默认收货地址
      defaultAddr: state => state.address.defaultAddr,
      // 全部收货地址
      allAddrData: state => state.address.allAddrList
    }),
    // linkAddress 拼接地址
    linkAddress () {
      let district = this.curAddrData.area || ''
      return this.curAddrData.province + this.curAddrData.city + district + this.curAddrData.address
    }
  },
  mounted () {
    this.getAllAddrList() // 获取所有地址
    this.fetchDefaultAddr() // 获取默认地址
  },
  methods: {
    // 获取地址,商品发票信息
    ...mapActions({
      getAllAddrList: 'fetchAllAddrList',
      getDefaultAddr: 'fetchGetDefaultAddr'
    }),

    // 获取默认地址
    fetchDefaultAddr () {
      this.getDefaultAddr().then(res => {
        if (res.data.resultCode && res.data.resultCode === 2000) {
          let data = res.data.data
          if (data) {
            this.curAddrData = data
            this.addressId = data.id
            this.$emit('getAddrId', data.id)
          }
        }
      })
    },

    // 在没有地址的时候 新增地址
    addNewAddr () {
      this.morevisible = false
      this.$store.commit(MODIFYADDR, {})
      this.addrTitle = '新增地址'
      this.dialogvisible = true // 显示弹窗
      this.fetchDefaultAddr()
    },

    // 修改现有的地址
    modifyFun () {
      this.$store.commit(MODIFYADDR, this.curAddrData)
      this.addrTitle = '修改地址'
      this.dialogvisible = true
    },

    // 更多地址
    showMoreAddr () {
      this.morevisible = true
    },

    // 更多地址中 选择一个地址
    currentAddrFun (id) {
      this.getAddrOne(id)
      this.morevisible = false
    },

    // 根据地址id,获取地址
    getAddrOne (id) {
      this.addressId = id
      this.$emit('getAddrId', id)
      let allAddr = this.$store.state.address.allAddrList
      let _arr = allAddr.filter((item, index) => {
        return item.id === id
      })
      this.curAddrData = _arr[0]
    },

    // 关闭--添加地址的弹窗
    closeAddrDialog (id) {
      if (id) {
        this.getAddrOne(id)
      } else {
        this.fetchDefaultAddr() // 第一次新增地址 收取默认地址
      }
      this.dialogvisible = false
    },

    // 分仓id
    async fetchWarehouseId () {
      let [warehouseId, IPCode] = ['', this.curAddrData.cityCode]
      let res = await getWarehouseId(undefined, IPCode)
      return new Promise((resolve, reject) => {
        if (res.data.resultCode && res.data.resultCode === 2000) {
          warehouseId = res.data.data
          this.warehouseId = res.data.data
          this.$emit('getWareId', warehouseId)
          resolve(warehouseId)
        }
      })
    }
  },
  watch: {
    // 更换地址
    curAddrData (newVal) {
      console.log('change deliver addr')
      this.cityCode = newVal.cityCode
      this.fetchWarehouseId().then(res => {
        console.log(res)
        this.$emit('modifReceive', res)
      }) // 分仓id
    }
  }
}
</script>

<style lang="scss" scoped>
  .order_deliver_box{
    position: relative;
    padding: 38px 0;
    color:#666666;
    overflow: hidden;
    @include border_bt();
    .order_font{
      color: RGBA(102, 102, 102, 1);
      font-size: 16px;
      line-height: 22px;
    }
    .order-text-box{
      float: right;
      margin-bottom: 10px;
    }
    .info_title_rt{
      float: right;
      line-height: 24px;
    }
  }
  .pdt6{padding-top: 6px;}
  .order_address_box{
    display: inline-block;
    width: 400px;
    border: 1px #dbdbdb solid;
    box-sizing: border-box;
    padding: 22px;
    p{
      line-height: 22px;
      margin-bottom: 10px;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
  .more-addr-box{
    position: relative;
    margin: -65px -27px -30px;
    text-align: center;
    .more-addr-head{
      background: #e8e8e8;
      border-bottom: 1px solid #dbdbdb;
      padding: 5px 0;
      overflow:hidden;
      span{
        font-weight: 600;
      }
    }
    .addr-line{
      border-bottom: 1px solid #dbdbdb;
      display: block;
      padding: 10px 0;
      cursor: pointer;
      color: #646870;
       overflow:hidden;
      &:last-child{
        border-bottom: none;
      }
      &.active{
        background: #f55923;
        color: #fff;
      }
      &.active:hover{
        box-shadow: none;
        border-bottom: 1px solid #dbdbdb;
      }
      &:hover {
        box-shadow: 0 0 5px #f65824;
        border-bottom: none;
      }
    }
    .more-addr-div{
      .text{
        display:inline-block;
        padding-top: 5px;
        text-align: left;
        overflow:hidden;
      }
      .one{
        width: 120px;
        padding-left: 50px;
      }
      .two{
        width: calc(100% - 350px);
      }
      .three{
        width: 140px;
        text-align:right;
      }
    }
    .more-addbtn{
      border-radius: 4px;
      border: 1px solid #f55923;
      color: #f55923;
      font-size: 13px;
      margin: 14px;
      display: inline-block;
      padding: 5px 15px;
      cursor: pointer;
      &:hover {
        background-color: #f55923;
        color: #fff;
      }
    }
  }
  .blue_font{
    font-size: 14px;
    color: #2A91D2;
  }
</style>
